import { forwardRef } from 'react';
import * as React from 'react';
import { Form } from 'formik';
import styled from 'styled-components';
import { breakpoint } from '@/theme';
import FlashMessageRender from '@/components/FlashMessageRender';
import tw from 'twin.macro';
import { useStoreState } from 'easy-peasy';

type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
    title?: string;
};

const Container = styled.div`
    ${breakpoint('sm')`
        ${tw`w-4/5 mx-auto`}
    `};

    ${breakpoint('md')`
        ${tw`p-10`}
    `};

    ${breakpoint('lg')`
        ${tw`w-3/5`}
    `};

    ${breakpoint('xl')`
        ${tw`w-full`}
        max-width: 700px;
    `};
`;

export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
    <Container>
        {title && <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>{title}</h2>}
        <FlashMessageRender css={tw`mb-2 px-1`} />
        <Form {...props} ref={ref}>
            <div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
                <div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
                    <img
                        src={useStoreState(state => state.settings.data?.logo.auth) || '/assets/svgs/pterodactyl.svg'}
                        css={tw`block w-48 md:w-64 mx-auto`}
                    />
                </div>
                <div css={tw`flex-1`}>{props.children}</div>
            </div>
        </Form>
        <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
            &copy; 2015 - {new Date().getFullYear()}&nbsp;
            <a
                rel={'noopener nofollow noreferrer'}
                href={'https://pterodactyl.io'}
                target={'_blank'}
                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
            >
                Pterodactyl Software
            </a>
            &nbsp;| Sinicizated by&nbsp;
            <a
                rel={'noopener nofollow noreferrer'}
                href={'https://pterodactyl.top'}
                target={'_blank'}
                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
            >
                翼龙中国
            </a>
        </p>
        {useStoreState(state => state.settings.data?.icp.enabled) && (
            <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
                {useStoreState(state => state.settings.data?.icp.security_record) && (
                    <a
                        rel={'noopener nofollow noreferrer'}
                        href={
                            'https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' +
                            useStoreState(state => state.settings.data?.icp.security_record)?.match(/\d+/g)
                        }
                        target={'_blank'}
                        css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
                    >
                        <img src={'/assets/images/gongan.png'} css={tw`display: inline`} />
                        &nbsp;
                        {useStoreState(state => state.settings.data?.icp.security_record)}
                    </a>
                )}
                {useStoreState(state => state.settings.data?.icp.security_record) && <a>&nbsp;|&nbsp;</a>}
                <a
                    rel={'noopener nofollow noreferrer'}
                    href={'https://beian.miit.gov.cn'}
                    target={'_blank'}
                    css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
                >
                    {useStoreState(state => state.settings.data?.icp.record)}
                </a>
            </p>
        )}
    </Container>
));
